<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式网格</title>
    <style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		.container {
			min-width: 769px;
		}
		.clearfix:before,
		.clearfix:after {
			content: '';
			display: table;
			clear: both;
		}
		
		[class*='col-'] {
			float: left;
			min-height: 50px;
			border: 1px solid #999;
			background-color: #eee;
			padding: 20px;
			text-align: center;
		}
		@media only screen and (min-width:769px) {
			.small {
				display: none;
			}
			.col-md-1 {
				width: 8.33333%;
			}
			.col-md-2 {
				width: 16.66667%;
			}
			.col-md-3 {
				width: 25%;
			}
			.col-md-4 {
				width: 33.33333%;
			}
			.col-md-6 {
				width: 50%;
			}
			.col-md-12 {
				width: 100%;
			}
		}
		/* 屏幕宽度小于768px */
		@media screen and (max-width:769px){
			.small {
				display: block;
			}
			.big {
				display: none;
			}
			.col-xs-1 {
				width: 8.33333%;
			}
			.col-xs-2 {
				width: 16.66667%;
			}
			.col-xs-3 {
				width: 25%;
			}
			.col-xs-4 {
				width: 33.33333%;
			}
			.col-xs-6 {
				width: 50%;
			}
			.col-xs-12 {
				width: 100%;
			}
		}	
    </style>
</head>
<body>
<div class="container big">
	<div class="row clearfix">
		<div class="col-md-4">四栏</div>
		<div class="col-md-4">四栏</div>
		<div class="col-md-4">四栏</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-3">三栏</div>
		<div class="col-md-6">六栏</div>
		<div class="col-md-3">三栏</div>	
	</div>
	<div class="row clearfix">
		<div class="col-md-1">1</div>
		<div class="col-md-1">1</div>
		<div class="col-md-2">两栏</div>
		<div class="col-md-2">两栏</div>
		<div class="col-md-6">六栏</div>	
	</div>
</div>
<div class="container small">
	<div class="row clearfix">
		<div class="col-xs-6">六栏</div>
		<div class="col-xs-6">六栏</div>
	</div>
	<div class="row clearfix">
		<div class="col-xs-12">十二栏</div>
	</div>
	<div class="row clearfix">
		<div class="col-xs-3">三栏</div>
		<div class="col-xs-6">六栏</div>
		<div class="col-xs-3">三栏</div>	
	</div>
	<div class="row clearfix">
		<div class="col-xs-2">两栏</div>
		<div class="col-xs-2">两栏</div>
		<div class="col-xs-8">八栏</div>
	</div>
	<div class="row clearfix">
		<div class="col-xs-3">三栏</div>
		<div class="col-xs-3">三栏</div>
	</div>
</div>
</body>
</html>